import React from 'react';
import './index.less'
import {Button,Table, Divider, Tag,Row, Col,Menu,Modal,Input,message} from "antd";
import FWQ from "../../../images/areacellsvg/FWQ.svg";
import JHJ from "../../../images/areacellsvg/JHJ.svg";
import KHD from "../../../images/areacellsvg/KHD.svg";
import LYQ from "../../../images/areacellsvg/LYQ.svg";
import RJZY from "../../../images/areacellsvg/RJZY.svg";
import UPS from "../../../images/areacellsvg/UPS.svg";
import BreadcrumbCustom from "../../../components/BreadcrumbCustom";
import axios from 'axios'
import {PATH,URL} from '../../../utils/urls'

const svgTypeArray = [FWQ,KHD,UPS,LYQ,JHJ,RJZY];
export default class AreaSceneWarn extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            id:"",
            areaSceneHardWareList:[],//接口中获取到设备列表
            svgArray:[],//在场景中的svg数组
            areaScenesArray:[],//左上角报警文字
        }
    }


    componentWillUnmount() {

    }

    componentDidMount() {
        console.log(this.props);
        if(this.props.location.state){
            let areaMain = {
                svgCell:<img src={this.props.location.state.sceneImg} className="areaImg"/>,
                id:-1
            }
            this.setState({
                svgArray:[areaMain],
                id:this.props.location.state.id
            })

            //获取当前区域场景的右侧列表
            this.getAreaSceneCellListFun();
        }
    }

    /**
     *获取当前区域场景的列表
     */
    getAreaSceneCellListFun(){
        axios.post(PATH.hardwareResource,{
        }).then(response=>{
            console.log(response);
            if(response.data.code == 0){
                let dataArray = response.data.data;
                console.log(dataArray);
                for(let i = 0;i<dataArray.length;i++){
                    let src =svgTypeArray[dataArray[i].resouceType];
                    let style = {width:120,height:88,left:parseInt(dataArray[i].locationX),top:parseInt(dataArray[i].locationY)};
                    let currentWidth = 120;
                    let statusStyle=null;
                    if(dataArray[i].resouceStatus == 0){
                        statusStyle = {color:'black'};
                    }else{
                        statusStyle = {color:'#09f309'};
                    }
                    this.state.areaSceneHardWareList.push({
                        ...dataArray[i],
                        src:src,
                        style:style,
                        currentWidth:currentWidth,
                        statusStyle:statusStyle
                    });
                }
                this.setState({
                    areaSceneHardWareList:this.state.areaSceneHardWareList
                })
                //获取当前区域场景的元素
                this.getAreaSceneCellFun(this.props.location.state.id);
            }
        })
    }

    /**
     * 获取当前区域场景的元素
     */
    getAreaSceneCellFun(id){
        axios.post(PATH.hardwareResource,{
            sceneId:id
        }).then(response=>{
            console.log(response);
            if(response.data.code == 0){
                let dataArray = response.data.data;
                for(let i = 0;i<dataArray.length;i++){
                    dataArray[i].key = i+1;
                    let style = {
                        left:parseInt(dataArray[i].locationX),
                        top:parseInt(dataArray[i].locationY),
                        position: "absolute",
                        width:dataArray[i].width,
                        height:dataArray[i].height,
                        border:"0px"
                    };
                    let index = this.getIndexById(dataArray[i].id);
                    this.state.areaSceneHardWareList[index].style = style;
                    let svgCell = <img title={dataArray[i].resouceName} id={dataArray[i].id} onMouseUp={this.onImgMouseUp} onClick={this.onClickCell}
                                       src={svgTypeArray[dataArray[i].resouceType]} style={this.state.areaSceneHardWareList[index].style}/>;
                    this.state.svgArray.push({
                        svgCell:svgCell,
                        id:dataArray[i].id
                    });

                    this.setState({
                        areaScenesArray:dataArray,
                        svgArray:this.state.svgArray
                    })
                }
                console.log(this.state);
            }
        })
    }

    /**
     * 通过设备列表id获取当前索引
     */
    getIndexById(id){
        let index = 0;
        for(let i = 0;i<this.state.areaSceneHardWareList.length;i++){
            if(this.state.areaSceneHardWareList[i].id == id){
                index = i;
                break;
            }
        }
        return index;
    }
    /**
     * 提交修改元素
     */
    submitFun=()=>{
        console.log(this.state);
        let sendDataArray = [];
        let areaSceneHardWareList = this.state.areaSceneHardWareList;
        let svgArray = this.state.svgArray;
        for(let i = 0;i<areaSceneHardWareList.length;i++){
            for(let j = 0;j<svgArray.length;j++){
                if(svgArray[j].id == areaSceneHardWareList[i].id){
                    let obj = {
                        sceneId:this.state.id,
                        id:areaSceneHardWareList[i].id,
                        resouceType:areaSceneHardWareList[i].resouceType,
                        locationX:areaSceneHardWareList[i].style.left,
                        locationY:areaSceneHardWareList[i].style.top,
                        width:areaSceneHardWareList[i].style.width,
                        height:areaSceneHardWareList[i].style.height,
                    }
                    sendDataArray.push(obj);
                }
            }
        }
        axios.post(PATH.areaSceneAddCell,sendDataArray).then(response=>{
            console.log(response);
            if(response.data.code == 0){
                message.success(response.data.msg);
            }else{
                message.error(response.data.msg);
            }
        })
        console.log(sendDataArray);
    }

    render() {
        let redStyle={color:"#ff0000"};
        let greenStyle={color:"#00ff00"};
        return (
            <div draggable="true">
                <BreadcrumbCustom first="区域场景"/>
                <div className="mainSceneAreaWarn">
                    <ul>
                        {
                            this.state.areaScenesArray.map((item,index)=>{
                                return(
                                    <li key={index}>
                                        <span >{item.key}</span>
                                        <span >、</span>
                                        <span className="sceneList">{item.resouceName}</span>
                                        <span className="sceneList" style={item.warnStatus=="0"?greenStyle:redStyle}>{item.warnStatus=="0"?"正常":"警告"}</span>
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>
                <div>
                    <div id="wrap" className="areascenewarndiv">
                        {
                            this.state.svgArray.map((item,index)=>{
                                return(
                                    <div key={index}  id="areaSceneId">{item.svgCell}</div>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        )
    }
}